<template>
  <div>
    App
    <!-- 
      插槽：
        用于父子组件通信，通信的标签数据

      1. 默认插槽
        - 父组件给子组件传递标签数据
          <AComp>
            <p>xxx</p>
          </AComp>
        - 子组件使用
          <slot />

      2. 具名插槽（命名插槽）
        - 父组件给子组件传递标签数据
          <AComp>
            <template v-slot:xxx>
              <p>xxx</p>
            </template>

            <template #xxx>
              <p>xxx</p>
            </template>
          </AComp>
        - 子组件使用
          <slot name="xxx"/>

      3. 作用域插槽
        - 子组件给slot标签设置标签属性
          <slot :xxx="xxx"/>
        - 数据会传递给父组件对应插槽内
           <AComp>
            <template #xxx="{ xxx }">
              <p>{{xxx}}</p>
            </template>
          </AComp>
     -->
    <AComp>
      <!-- 默认插槽：传递标签数据 -->
      <!-- <p>{{ num }}</p> -->
      <!-- <p>{{ num }}</p>
      <span>{{ num }}</span>
      <div>{{ num }}</div>
      <p>{{ num }}</p> -->

      <!-- 具名插槽 -->
      <!-- 
        template标签类似于React中Fragment组件 
        不会生成DOM元素
      -->
      <!-- <template v-slot:header>
        <header>头部...</header>
      </template>

      <main>主体内容 AAAA...</main>

      <template #footer>
        <footer>底部。。。</footer>
      </template> -->

      <template v-slot:header="{ text }">
        <header>头部 {{ text }}...</header>
      </template>

      <!-- v-slot指令的值就是子组件传递的标签属性数据 -->
      <!-- <template v-slot="$scoped">
        <main>主体内容 {{ $scoped.text }}...</main>
      </template> -->
      <!-- 对象解构语法 -->
      <template v-slot="{ text }">
        <main>主体内容 {{ text }}...</main>
      </template>

      <template #footer="{ text }">
        <footer>底部 {{ text }}。。。</footer>
      </template>
    </AComp>
  </div>
</template>

<script>
import AComp from "./AComp.vue";

export default {
  name: "App",
  components: {
    AComp,
  },
  data() {
    return {
      num: 0,
    };
  },
};
</script>

<style>
</style>